<template>
  <div class="weapon-item">
    <div class="row">
      <div class="col10 right-line">
        <div class="row flex-hcenter pt10 pb10">
          ID:{{weapon.id}}
        </div>
        <div class="row flex-hcenter pt10 pb10 top-line flex-vcenter name">
          名称：<input type="text" v-model="weapon.name">
        </div>
        <div class="row sprite top-line flex-hcenter">
          <img :src="weapon.sprite" alt="" @click="spriteClick(weapon)">
        </div>
      </div>
      <div class="col14">
        <div class="row pd10 bottom-line">
          <textarea v-model="weapon.note"></textarea>
        </div>
        <div class="row flex-wrap">
          <div class="attr-item">海：<input type="text" v-model="weapon.ocean"></div>
          <div class="attr-item">陆：<input type="text" v-model="weapon.land"></div>
          <div class="attr-item">空：<input type="text" v-model="weapon.air"></div>
          <div class="attr-item">命中：<input type="text" v-model="weapon.hitRate"></div>
          <div class="attr-item">射程：<input type="text" v-model="weapon.range"></div>
        </div>
        <div class="row">
          <div>
            <Button type="primary" @click="saveData">修改</Button>
            <Button type="danger">删除</Button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
import Button from '../../common/Button.vue'
import axios from '../../../lib/request.js'

export default {
  components:{Button},
  emits:['spriteClick'],
  props:['data'],
  setup(props,context) {
    const state = reactive({
      weapon:{...props.data}
    })

    const spriteClick = (item)=>{
      context.emit('spriteClick',item)
    }

    const saveData = async ()=>{
      const {data} = await axios.post('/weapon/saveWeaponData',{data:state.weapon})      
      console.log(data);
    }

    return {
      ...toRefs(state),spriteClick,
      saveData
    }
  },
}
</script>
<style lang="less" scoped>
@import '../../../theme.less';
.weapon-item {
  border: 1px solid @theme-line;
  border-radius: 6px;
  .name {
    input {
      width: 100px;
    }
  }
  .sprite {
    padding: 20px;
    img {
      border-radius: 10%;
      cursor: pointer;
      max-width: 60px;
    }
  }
  textarea {
    padding: 10px;
    width: 100%;;
    border-radius: 4px;
  }
  .attr-item {
    color: @theme-line;
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid @theme-line;
    &:nth-child(2n+1){
      border-right: 1px solid @theme-line;
    }
  }
  input {
    width: 50px;
  }
}
</style>